<template>
  <div class="login-container">
    <div class="login-form-wrap">
      <div class="login-head">
        <div class="logo"></div>
      </div>
      <el-form :rules="loginRules" class="login-form" ref="loginFormRef" :model="user">
        <el-form-item prop="username">
          <el-input v-model="user.username" placeholder="请输入账号"></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            v-model="user.password"
            placeholder="请输入密码"
            show-password
          >
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button class="login-btn" type="primary" @click="onLogin"
            >登录</el-button
          >
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { login } from "@/api/user";
export default {
  name: "LoginIndex",
  components: {},
  props: {},
  data() {
    return {
      user: {
        username: "", //账号
        password: "", //密码
      },
      loginRules: {
        username:  [
           { required: true, message: '请输入用户名称', trigger: 'blur' },
           {
             min: 3,
             max: 10,
             message: '长度在 3~10 个字符之间',
             trigger: 'blur',
           },
         ],
         password:  [
           { required: true, message: '请输入密码', trigger: 'blur' },
           {
             min: 3,
             max: 10,
             message: '长度在 3~10 个字符之间',
             trigger: 'blur',
           },
         ]
      }
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    onLogin() {
      this.$refs.loginFormRef.validate(async (valid) => {
        if (valid) {
          try {
            const { data } = await login(this.user);
            this.$message.success('登陆成功')

            //将后端返回的用户登陆状态（token等数据）放到Vuex容器中
            this.$store.commit("setUser", data.data);

            this.$router.push("/layout");
          } catch (err) {
            this.$message({
              message: "登陆失败",
              type: "warning",
            });
          }
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
.login-container {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  //排列方向上下
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: url("./login_bg.jpg") no-repeat;
  //背景填充模式
  background-size: cover;

  .login-form-wrap {
    min-width: 300px;
    padding: 30px 50px 10px;
    background-color: skyblue;

    .login-head {
      display: flex;
      justify-content: center;

      .logo {
        height: 57px;
        width: 200px;
        background: url("./logo_index.png") no-repeat;
        background-size: contain;
      }
    }

    .login-form {
      .login-btn {
        width: 100%;
      }
    }
  }
}
</style>>
